<template>
  <Form ref="formRef" :model="formData" :rules="rules" :label-width="120">
    <FormItem label="所属企业：" prop="companyId">
      <Select v-model="formData.companyId" @on-change="handleCompanyChange">
        <Option
          v-for="item in companyList"
          :value="item.id"
          :key="item.value"
          :label="item.name"
        />
      </Select>
    </FormItem>
    <FormItem label="所属区域：" prop="groupId">
      <Select v-model="formData.groupId">
        <Option
          v-for="item in groupList"
          :value="item.id"
          :key="item.value"
          :label="item.name"
        />
      </Select>
    </FormItem>
    <FormItem label="设备名称：" prop="name">
      <Input v-model.trim="formData.name" placeholder="请输入设备名称..." />
    </FormItem>
    <FormItem label="设备别名：" prop="alias">
      <Input v-model.trim="formData.alias" placeholder="请输入设备别名..." />
    </FormItem>
    <FormItem
      label="设备ID："
      :error="formItemRuiKongDeviceIdErrorText"
      prop="deviceId"
    >
      <Input v-model.trim="formData.deviceId" placeholder="请输入设备ID..." />
    </FormItem>
    <FormItem label="设备位置：" prop="location">
      <Input v-model.trim="formData.location" placeholder="请输入设备位置..." />
    </FormItem>
    <FormItem label="设备类型：" prop="deviceType">
      <Select v-model="formData.deviceType" @on-change="handleDeviceTypeChange">
        <Option
          v-for="item in deviceTypeList"
          :value="item.id"
          :key="item.index"
          :label="item.name"
        />
      </Select>
    </FormItem>
    <FormItem label="采集方式：" prop="collectType">
      <Select
        v-model="formData.collectType"
        @on-change="handleCollectTypeChange"
      >
        <Option
          v-for="item in collectTypeList"
          :value="item.desCode"
          :key="item.index"
          :label="item.des"
        />
      </Select>
    </FormItem>
  </Form>
</template>
<script>
import {
  getCompanyListOfNew as httpGetCompanyList,
  getGroupList as httpGetGroupList,
  getDeviceType as httpGetDeviceType,
  getGatewayType as httpGetCollectTypes
} from '@/api'

import { generateRules } from '../utils'
export default {
  mounted() {
    this.getCompanyList()
  },
  data() {
    return {
      formData: {
        companyId: '',
        groupId: '',
        name: '',
        alias: '',
        deviceId: '',
        location: '',
        deviceType: null,
        collectType: null,
        hardwareType: 0
      },
      rules: generateRules(),
      companyList: [],
      groupList: [],
      deviceTypeList: [],
      collectTypeList: [],
      // 'power' || 'no-power'
      companyType: 'no-power',

      // '106' || '117-8' || '117-4' || 'rui-kong'
      deviceType: null,

      // 'dtu'  || 'wang-guan' || 'zhilian' || 'chuan-kou'
      collectType: null
    }
  },
  methods: {
    validate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const params = {
            formData: { ...this.formData },
            companyType: this.companyType,
            deviceType: this.deviceType,
            collectType: this.collectType
          }
          if (this.deviceType === 'rui-kong') {
            if (this.formData.collectType !== 5) {
              this.$Message.error(
                '智慧安全用电监控装置SEFM-126只能使用阿里IoT设备直连方式采集'
              )
              return false
            }
            callback(valid, params)
          } else {
            callback(valid, params)
          }
        } else {
          callback(valid)
        }
      })
    },

    getCompanyList() {
      const params = { page: 1, size: 1000 }
      httpGetCompanyList(params).then(res => {
        if (res.data) {
          this.companyList = res.data.list
        } else {
          this.companyList = []
        }
      })
    },

    getGroupList() {
      const params = { companyId: this.formData.companyId }
      httpGetGroupList(params).then(res => {
        if (res.data) {
          this.groupList = res.data.list
        }
      })
    },

    getDeviceTypeList(company) {
      const vm = this
      httpGetDeviceType().then(res => {
        if (res.data) {
          if (company.transformerStructure) {
            // 配电企业
            vm.deviceTypeList = res.data.filter(t => {
              if (~t.series.indexOf('106')) return t
            })
            vm.companyType = 'power'
          } else {
            // 非配电结构企业
            vm.deviceTypeList = res.data || []
            vm.companyType = 'no-power'
          }
        }
      })
    },

    // 获取采集类型列表
    getCollectTypeList() {
      httpGetCollectTypes().then(res => {
        if (res.data) {
          this.collectTypeList = res.data
        }
      })
    },

    handleCompanyChange(value) {
      const vm = this
      if (!value) return
      vm.formData.groupId = null
      vm.formData.deviceType = null
      const company = vm.companyList.find(t => t.id === value)
      vm.getGroupList()
      vm.getDeviceTypeList(company)
    },

    handleDeviceTypeChange(value) {
      if (!value) return
      this.formData.collectType = null
      this.getCollectTypeList()
      const deviceType = this.deviceTypeList.find(t => t.id === value)
      const { type: hardwareType, series } = deviceType
      this.formData.hardwareType = hardwareType
      if (~series.indexOf('106') || ~series.indexOf('116')) {
        this.deviceType = '106'
      } else if (~series.indexOf('8路')) {
        this.deviceType = '117-8'
      } else if (~series.indexOf('4路')) {
        this.deviceType = '117-4'
      } else if (~series.indexOf('126')) {
        this.deviceType = 'rui-kong'
      }
    },

    handleCollectTypeChange(value) {
      if (!value && value !== 0) return
      /**
       * 0 有人dtu
       * 1 中惠网关
       * 2 习羽网关
       * 3 有人网关
       * 4 电信iot
       * 5 阿里iot直连
       * 6 串口服务器
       */
      if (value === 1 || value === 2 || value === 3) {
        this.collectType = 'wang-guan'
      } else if (value === 0) {
        this.collectType = 'dtu'
      } else if (value === 6) {
        this.collectType = 'chuan-kou'
      } else {
        this.collectType = 'dtu'
      }
    }
  }
}
</script>
